// App 主布局样式
$--color-primary: #409eff;
$--color-primary-light-7: #c6e2ff;
$--color-primary-light-8: #d9ecff;
$--color-primary-light-9: #ecf5ff;
$--color-danger: #f56c6c;
$--color-success: #67c23a;
$--color-success-light: #b3e19d;
$--color-info: #909399;
$--color-info-light: #c8c9cc;

// 自定义变量
$aside-width: 260px;
$header-height: 60px;
$aside-bg: #ffffff;
$main-bg: #ffffff;
$border-color: #e5e7eb;
$shadow-light: 0 1px 3px rgba(0, 0, 0, 0.1);
$shadow-medium: 0 4px 6px rgba(0, 0, 0, 0.07);

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu',
    'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: $main-bg;
}

#app {
  height: 100vh;
  overflow: hidden;
  min-width: 375px;
}

.app-container {
  height: 100vh;
  background-color: $main-bg;
  min-width: 768px;
  overflow-x: auto;
}

// 侧边栏样式
.app-aside {
  width: $aside-width !important;
  background: $aside-bg;
  border-right: 1px solid $border-color;
  box-shadow: $shadow-light;
  overflow: hidden;

  .aside-content {
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  .logo-section {
    height: 60px;
    border-bottom: 1px solid $border-color;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;

    .header-logo {
      width: 32px;
      height: 32px;
      margin-right: 12px;
      object-fit: contain;
    }

    .header-title {
      margin: 0;
      font-size: 18px;
      font-weight: 600;
      color: #1f2937;
      background: linear-gradient(135deg, $--color-primary, #667eea);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      white-space: nowrap;
      cursor: pointer;
      transition: all 0.2s;

      &:hover {
        transform: scale(1.02);
      }
    }
  }

  .sidebar-nav {
    flex: 1;
    overflow-y: auto;
    padding: 10px 0;

    // 自定义滚动条
    &::-webkit-scrollbar {
      width: 4px;
    }

    &::-webkit-scrollbar-track {
      background: transparent;
    }

    &::-webkit-scrollbar-thumb {
      background: rgba(0, 0, 0, 0.1);
      border-radius: 2px;

      &:hover {
        background: rgba(0, 0, 0, 0.2);
      }
    }

    .nav-menu {
      border: none;
      background: transparent;

      .el-menu-item-group {
        .el-menu-item-group__title {
          padding: 12px 20px 8px 20px;
          color: #909399;
          font-size: 12px;
          font-weight: 600;
          text-transform: uppercase;
          letter-spacing: 0.5px;
        }
      }

      .el-menu-item {
        height: 44px;
        line-height: 44px;
        padding: 0 20px 0 40px;
        margin: 2px 10px;
        border-radius: 8px;
        transition: all 0.2s;
        color: #606266;

        &:hover {
          background-color: $--color-primary-light-9;
          color: $--color-primary;
        }

        &.is-active {
          background-color: $--color-primary;
          color: white;

          i {
            color: white;
          }
        }

        i {
          margin-right: 12px;
          font-size: 16px;
          width: 16px;
          text-align: center;
          color: #909399;
          transition: color 0.2s;
        }

        span {
          font-size: 14px;
          font-weight: 500;
        }

        // 首页特殊样式
        &[data-index='/'] {
          margin: 10px;
          background: linear-gradient(135deg, $--color-primary-light-9, $--color-primary-light-8);
          border: 1px solid $--color-primary-light-7;

          &:hover {
            background: linear-gradient(135deg, $--color-primary-light-8, $--color-primary-light-7);
          }

          &.is-active {
            background: linear-gradient(135deg, $--color-primary, #667eea);
          }
        }
      }
    }
  }
}

// 主容器样式
.main-container {
  flex: 1;
  overflow: hidden;
  min-width: 400px;
}

// 顶部标题栏样式
.app-header {
  background: white;
  border-bottom: 1px solid $border-color;
  box-shadow: $shadow-light;
  height: $header-height !important;
  line-height: $header-height;
  padding: 0 24px;

  .header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;

    .page-title {
      margin: 0;
      font-size: 20px;
      font-weight: 600;
      color: #1f2937;
    }

    .header-links {
      display: flex;
      align-items: center;
      gap: 16px;

      .header-link {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        border-radius: 8px;
        background: $--color-primary-light-9;
        color: $--color-primary;
        text-decoration: none;
        transition: all 0.2s;
        font-size: 16px;

        &:hover {
          background: $--color-primary;
          color: white;
          transform: translateY(-1px);
          box-shadow: 0 4px 8px rgba(64, 158, 255, 0.3);
        }

        i {
          font-size: 16px;
        }

        &.github-link {
          background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='%23409eff' d='M12 .297c-6.63 0-12 5.373-12 12c0 5.303 3.438 9.8 8.205 11.385c.6.113.82-.258.82-.577c0-.285-.01-1.04-.015-2.04c-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729c1.205.084 1.838 1.236 1.838 1.236c1.07 1.835 2.809 1.305 3.495.998c.108-.776.417-1.305.76-1.605c-2.665-.3-5.466-1.332-5.466-5.93c0-1.31.465-2.38 1.235-3.22c-.135-.303-.54-1.523.105-3.176c0 0 1.005-.322 3.3 1.23c.96-.267 1.98-.399 3-.405c1.02.006 2.04.138 3 .405c2.28-1.552 3.285-1.23 3.285-1.23c.645 1.653.24 2.873.12 3.176c.765.84 1.23 1.91 1.23 3.22c0 4.61-2.805 5.625-5.475 5.92c.42.36.81 1.096.81 2.22c0 1.606-.015 2.896-.015 3.286c0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E");
          background-repeat: no-repeat;
          background-position: center;
          background-size: 20px 20px;

          &:hover {
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='white' d='M12 .297c-6.63 0-12 5.373-12 12c0 5.303 3.438 9.8 8.205 11.385c.6.113.82-.258.82-.577c0-.285-.01-1.04-.015-2.04c-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729c1.205.084 1.838 1.236 1.838 1.236c1.07 1.835 2.809 1.305 3.495.998c.108-.776.417-1.305.76-1.605c-2.665-.3-5.466-1.332-5.466-5.93c0-1.31.465-2.38 1.235-3.22c-.135-.303-.54-1.523.105-3.176c0 0 1.005-.322 3.3 1.23c.96-.267 1.98-.399 3-.405c1.02.006 2.04.138 3 .405c2.28-1.552 3.285-1.23 3.285-1.23c.645 1.653.24 2.873.12 3.176c.765.84 1.23 1.91 1.23 3.22c0 4.61-2.805 5.625-5.475 5.92c.42.36.81 1.096.81 2.20c0 1.606-.015 2.896-.015 3.286c0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E");
          }
        }
      }
    }
  }
}

// 主内容区样式
.app-main {
  background-color: $main-bg;
  padding: 0;
  overflow: hidden;
  height: calc(100vh - #{$header-height});
  min-width: 320px;

  .main-content {
    height: 100%;
    padding: 24px;
    display: flex;
    flex-direction: column;
    min-width: 320px;

    .page-content {
      flex: 1;
      background: white;
      border-radius: 12px;
      box-shadow: $shadow-medium;
      padding: 24px;
      overflow-y: auto;
      min-width: 280px;
      min-height: 400px;

      // 自定义滚动条
      &::-webkit-scrollbar {
        width: 6px;
      }

      &::-webkit-scrollbar-track {
        background: transparent;
      }

      &::-webkit-scrollbar-thumb {
        background: rgba(0, 0, 0, 0.2);
        border-radius: 3px;

        &:hover {
          background: rgba(0, 0, 0, 0.3);
        }
      }
    }
  }
}

// 动画效果
@keyframes slideInUp {
  from {
    transform: translateY(20px);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.page-content {
  animation: slideInUp 0.3s ease-out;
}

// Element UI 组件样式覆盖
.el-menu-item-group .el-menu-item {
  min-width: auto;
}

.el-badge__content {
  background-color: $--color-danger;
  border: none;
}

// DifyChat 卡片样式
.dify-chat-container {
  .chat-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
    padding: 20px;

    .chat-card {
      background: white;
      border-radius: 12px;
      box-shadow: $shadow-medium;
      border: 1px solid #e5e7eb;
      transition: all 0.3s ease;
      overflow: hidden;

      &:hover {
        transform: translateY(-4px);
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
        border-color: $--color-primary;
      }

      .card-header {
        padding: 20px;
        border-bottom: 1px solid #f0f0f0;
        background: linear-gradient(135deg, #f8f9fa, #ffffff);

        .card-title {
          font-size: 18px;
          font-weight: 600;
          color: #1f2937;
          margin: 0 0 8px 0;
        }

        .card-description {
          font-size: 14px;
          color: #6b7280;
          line-height: 1.5;
        }
      }

      .card-content {
        padding: 20px;

        .card-actions {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-top: 16px;

          .action-buttons {
            display: flex;
            gap: 8px;
          }

          .card-status {
            font-size: 12px;
            padding: 4px 8px;
            border-radius: 12px;
            background: $--color-success-light;
            color: $--color-success;
            font-weight: 500;

            &.inactive {
              background: $--color-info-light;
              color: $--color-info;
            }
          }
        }
      }
    }
  }
}

// 响应式样式
@import './responsive.scss';

/* Mermaid 图表样式 */
// .mermaid-container {
//   margin: 16px 0;
//   padding: 16px;
//   border: 1px solid #e1e5e9;
//   border-radius: 8px;
//   background: #fafbfc;
//   text-align: center;
//   overflow-x: auto;

//   .mermaid-loading {
//     color: #666;
//     font-style: italic;
//     padding: 20px;
//   }

//   .mermaid-error {
//     color: #d73a49;
//     background: #ffeef0;
//     border: 1px solid #fdaeb7;
//     border-radius: 4px;
//     padding: 12px;
//     font-family: monospace;
//     font-size: 12px;
//   }

//   .mermaid {
//     background: transparent;
//     border: none;

//     svg {
//       max-width: 100%;
//       height: auto;
//     }
//   }
// }

/* 深色主题支持 */
.dark .mermaid-container {
  background: #21262d;
  border-color: #30363d;

  .mermaid-loading {
    color: #8b949e;
  }

  .mermaid-error {
    color: #f85149;
    background: #2d1117;
    border-color: #f85149;
  }
}
